<template>
    <app-layout>
        <view class="page" :style="{ height: height }">
            <view class="swiper" :style="containerStyle">
                <block v-for="(item, index) in videoList" :key="index">
                    <video-new class="video" :video_id="item.video_id" :video_url="item.video_url" :height="height"
                        :width="width" :play="item.flag" :cur_index="cur_index"
                        :style="{ height: height, width: width }"></video-new>
                </block>
            </view>
            <view class="close" @click.stop="close">
                <image class="image" src="/static/image/video/video-close.png"></image>
            </view>
            <view class="cover-view-marks" :style="{ height: height, width: width }" @click.stop="clickVideo"
                @touchmove="ListTouchMove" @touchend.stop="ListTouchEnd" @touchstart="ListTouchStart">
            </view>
            <view class="operating ">
                <view class="dir-left-nowrap cross-bottom">
                    <view class="left dir-left-nowrap main-between">
                        <view class="up-down-video">
                            <view class="item" @click="previous">上一个视频</view>
                            <view class="item down" @click="next">下一个视频</view>
                        </view>
                    </view>
                    <view class="right dir-left-nowrap">
                        <view class="but index" @click.stop="routeGo('/pages/index/index')">
                            <view class="icon">
                                <image class="image" src="/static/image/video/video-index.png"></image>
                            </view>
                            <text>首页</text>
                        </view>
                        <view class="but">
                            <view class="icon">
                                <image class="image" src="/static/image/video/video-share.png"></image>
                            </view>
                            <text>分享</text>
                            <!-- #ifdef MP -->
                            <button class="share" open-type="share">
                            </button>
                            <!-- #endif -->
                            <!-- #ifdef H5 -->
                            <button class="share" @click="shareUrl">
                            </button>
                            <!-- #endif -->
                        </view>
                    </view>
                </view>
                <view class="empty" :style="{'height': getEmpty+'rpx'} ">
                </view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import {
        mapGetters,
        mapState
    } from 'vuex';
    import appIphoneX from '../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    import videoNew from '../../components/page-component/goods/app-goods-video.vue';
    export default {
        components: {
            'app-iphone-x': appIphoneX,
            'video-new': videoNew
        },
        data() {
            return {
                plugin: '',
                buyBool: false,
                selectGroupAttrId: -1,
                translateX: '10',
                height: '667px',
                cur_index: null,
                width: '',
                sysheight: 0,
                containerStyle: 'transform:translateY(0px)',
                distance: 0,
                listTouchStartY: 0,
                listTouchDirection: null,
                scroll: false,
                videoList: [],
                video_list: [],
                clicktime: 0,
                page: 1,
                video_id: 0,
                show: 0,
                item: null,
                ne: 0,
                pre: 0,
                addText: '',
                getResult: null,
                han: null
            };
        },
        computed: {
            ...mapGetters('iPhoneX', {
                getEmpty: 'getEmpty'
            }),
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
            ...mapState('gift', {
                theme: state => state.theme,
            }),
            themeObject: function () {
                if (this.sign === 'gift') {
                    return {
                        back: this.theme + '-background',
                        userTheme: this.theme,
                        color: this.theme + '-color',
                        backO: this.theme + '-background-o',
                        backP: this.theme + '-background-p'
                    }
                } else {
                    return {
                        back: this.getTheme + '-m-back ' + this.getTheme,
                        backP: this.getTheme + '-m-back-p ' + this.getTheme,
                        backO: this.getTheme + '-m-back-o ' + this.getTheme,
                        theme: this.getTheme,
                        color: this.getTheme + '-m-text ' + this.getTheme,
                        sBack: this.getTheme + '-s-back ' + this.getTheme,
                        border: this.getTheme + '-m-border ' + this.getTheme,
                    }
                }
            }
        },
        onLoad(options) {
            this.video_id = options.video_id;
            this.getVideo();
            let res = uni.getSystemInfoSync();
            this.height = `${res.windowHeight}px`;
            this.width = `${res.windowWidth}px`;
            this.sysheight = res.windowHeight;
        },
        onHide() {
            this.videoList[this.cur_index].flag = false;
            clearTimeout(this.getResult);
        },
        onShow() {
            if (this.cur_index !== null) {
                this.videoList[this.cur_index].flag = true;
            }
        },
        methods: {
            async getVideo() {
                let self = this;
                const res = await self.$request({
                    url: self.$api.cases.get_video,
                    method: 'get',
                    data: {
                        videoId: self.video_id,
                        page: self.page,
                    }
                });
                if (res.code === 0) {
                    let data = res.data.list;

                    for (let item of data) {

                        self.videoList.push({
                            video_id: item.id,
                            video_url: item.video_url,
                            flag: false,
                        });
                        self.video_list.push(item);
                        if (item.id == self.video_id) {
                            // this.cur_index = i;
                        }

                    }

                    if (self.cur_index == null) self.cur_index = 0;

                    self.$nextTick().then(() => {
                        let i = 0;
                        for (let item of self.videoList) {
                            if (item.video_id == self.video_id) {

                                self.cur_index = i;
                            }
                            i++;
                        }

                        self.distance = -self.sysheight * (self.cur_index);
                        console.log(self.distance)
                        self.containerStyle = `transform:translateY(${self.distance}px)`;
                        self.videoList[self.cur_index].flag = true;
                    });
                }

            },
            routeGo(data) {
                uni.navigateTo({
                    url: data,
                })
            },
            close() {
                uni.navigateBack();
            },
            clickVideo(e) {
                this.goodBool = false;
                if (this.clicktime > 0 && e.timeStamp - this.clicktime < 200) {
                    clearTimeout(this.han);
                } else {
                    let _this = this;
                    this.han = setTimeout(function () {
                        _this.videoList[_this.cur_index].flag = !_this.videoList[_this.cur_index].flag;
                    }, 200);
                }
                this.clicktime = e.timeStamp;
                return;
            },
            ListTouchStart(e) {
                this.listTouchStartY = e.changedTouches[0].pageY;
            },
            ListTouchMove(e) {
                this.listTouchDirection = this.listTouchStartY - e.changedTouches[0].pageY > 10 ? -1 : 0;
                this.listTouchDirection = e.changedTouches[0].pageY - this.listTouchStartY > 10 ? 1 : this
                    .listTouchDirection;
                const distance = this.distance + e.changedTouches[0].pageY - this.listTouchStartY;
                if (distance > 0) return;
                if (Math.abs(this.listTouchStartY - e.changedTouches[0].pageY) < 2) {
                    this.listTouchDirection = null;
                }
            },
            ListTouchEnd(e) {
                this.handelVideo(e);
            },
            handelVideo() {
                if (this.cur_index == 0 && this.listTouchDirection == 1) {
                    return;
                }

                this.translateX = 10;

                if (this.scroll) return;
                if (!this.listTouchDirection) {
                    return;
                }
                const destination = this.listTouchDirection * this.sysheight + this.distance;
                if (destination > 0 || destination < -this.sysheight * (this.videoList.length - 1)) return;
                for (let item of this.videoList) {
                    item.flag = false;
                }

                this.animate(destination, this.listTouchDirection);
                this.cur_index = this.cur_index - this.listTouchDirection;
                this.videoList[this.cur_index].flag = true;

                //移动到最后一个加载新的列表
                if (this.videoList.length == this.cur_index + 1) {
                    this.page++;
                    this.getVideo();
                }
                this.listTouchDirection = null;
            },
            animate(des, direc) {
                let {
                    distance
                } = this;
                return new Promise((resolve, reject) => {
                    this.scroll = true;
                    const temp = setInterval(() => {
                        if ((direc === -1 && des < distance) || (direc === 1 && des > distance)) {
                            distance += 100 * direc;
                            this.containerStyle = `transform:translateY(${distance}px)`;
                        } else {
                            clearInterval(temp);
                            distance = des;
                            this.distance = des;
                            this.containerStyle = `transform:translateY(${distance}px)`;
                            this.scroll = false;
                            resolve();
                        }
                    }, 20);
                });
            },

            previous() {
                console.log(this.video_list)
                if (this.cur_index === 0) {

                    this.video_id=this.video_list[0].id;
                    this.video_list=[];
                    this.getVideo();
                    return;
                }

                for (let item of this.videoList) {
                    item.flag = false;
                }
                this.distance = this.distance + this.sysheight;
                this.cur_index = this.cur_index - 1;
                this.containerStyle = `transform:translateY(${this.distance}px)`;
                clearTimeout(this.pre);
                this.pre = setTimeout(() => {
                    this.videoList[this.cur_index].flag = true;
                }, 300);

            },

            next() {

                if (this.cur_index + 1 === this.videoList.length) {
                    uni.showToast({
                        title: '无更多视频',
                        icon: 'none'
                    });
                    return
                }


                this.distance = this.distance - this.sysheight;

                this.containerStyle = `transform:translateY(${this.distance}px)`;
                clearTimeout(this.ne);
                this.ne = setTimeout(() => {
                    this.videoList[this.cur_index].flag = false;
                    this.cur_index = this.cur_index + 1;
                    this.videoList[this.cur_index].flag = true;
                });

                if (this.videoList.length < this.cur_index + 1) {
                    this.page++;
                    this.getVideo();
                }
            },
            nexts() {

                if (this.cur_index + 1 === this.videoList.length) {
                    uni.showToast({
                        title: '无更多视频',
                        icon: 'none'
                    });
                    return
                }
                this.distance = this.distance - this.sysheight;

                this.containerStyle = `transform:translateY(${this.distance}px)`;


                clearTimeout(this.ne);
                this.ne = setTimeout(() => {
                    this.videoList[this.cur_index].flag = false;
                    this.cur_index = this.cur_index + 1;
                    this.videoList[this.cur_index].flag = true;
                });

                if (this.videoList.length < this.cur_index + 1) {
                    this.page++;
                    this.getVideo();
                }
            },
            // #ifdef H5
            shareUrl() {
                let video = this.video_list[this.cur_index];

                let params = {
                    video_id: video.id,
                }
                this.$shareAppMessage({
                    title: video.title,
                    imageUrl: video.pic_url,
                    path: '/pages/cases/video',
                    params: params
                });
            }
            // #endif
        },
        // #ifdef MP
        onShareAppMessage() {
            let video = this.video_list[this.cur_index];
            let params = {
                video_id: video.id,
            }
            return this.$shareAppMessage({
                title: video.title,
                imageUrl: video.pic_url,
                path: '/pages/cases/video',
                params: params
            });
        },
        // #endif
        watch: {

        },
        onUnload() {
            clearTimeout(this.getResult);
        }
    };
</script>

<style lang="scss">
    @import '../../static/css/gift.scss';

    .empty {
        width: #{750upx};
    }

    .page {
        flex: 1;
        overflow: hidden;
        background-color: #000;
    }

    .operating {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1402;
    }

    .left {
        margin-left: #{26upx};
        width: #{410upx};
    }

    .right {
        margin-right: #{26upx};
    }

    .attr {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1403;
    }

    .up-down-video {
        .item {
            width: #{266upx};
            height: #{60upx};
            border-radius: #{16upx};
            background-color: rgba(51, 51, 51, .4);
            color: #ffffff;
            font-size: #{24upx};
            line-height: #{60upx};
            text-align: center;
        }

        .down {
            margin-top: #{12upx};
        }
    }

    .video-list {
        width: #{124upx};
        height: #{124upx};
        border-radius: #{62upx};
        background-color: rgba(51, 51, 51, .4);
        margin-left: #{20upx};
        position: relative;

        .image {
            width: #{68upx};
            height: #{78upx};
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .index {
        margin-left: #{20upx};
    }

    .cart {
        margin: #{0 30upx};
    }

    .but {
        text-align: center;
        position: relative;
        margin-right: 30rpx;

        .icon {
            width: #{70upx};
            height: #{70upx};
            border-radius: #{35upx};
            background-color: rgba(51, 51, 51, .4);
            position: relative;
        }

        .image {
            width: #{38upx};
            height: #{36upx};
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        text {
            color: #ffffff;
            font-size: #{24upx};
            line-height: 1;
        }
    }

    .share {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .scroll {
        width: #{690upx};
        height: #{240upx};
        position: fixed;
        left: 50%;
        bottom: #{157upx};
        transform: translate(-50%, 0%);
    }

    .scroll-view {
        height: calc(100% - #{23upx});
        background-color: #ffffff;
        border-radius: #{16upx};
        padding: #{0 25upx};

        .item-good {
            padding-top: #{25upx};

            .image-view {

                position: relative;

                >view {
                    width: #{150upx};
                    height: #{30upx};
                    line-height: #{30upx};
                    position: absolute;
                    bottom: 0;
                    font-size: #{18upx};
                    color: #ffffff;
                    text-align: center;
                    background: linear-gradient(to left, #ffcb00, #ff9600);
                }
            }
        }

        .cover-pic {
            width: #{150upx};
            height: #{150upx};
        }

        .content {
            width: calc(100% - #{150upx});
            min-height: #{150upx};
            margin-bottom: #{25upx};
            padding-left: #{25upx};
        }

        .name {
            line-height: #{32upx};
            font-size: #{24upx};
            color: #303030;
            margin-top: #{8upx};
        }

        .pri-but {

            >.button {
                width: #{50upx};
                height: #{50upx};
                background-image: url("../../static/image/icon/add-to.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                margin: #{0 4upx 0 0};
                border-radius: #{25rpx};
                background-color: transparent;
            }

            .pri {
                line-height: #{21upx};
                margin-top: #{9upx};
            }

            .price {
                font-size: #{21upx};
                line-height: 1;
            }

            .original {
                color: #999999;
                font-size: #{17upx};
                line-height: 1;
                text-decoration: line-through;
                margin-left: #{15upx};
            }
        }

        .member-price {
            margin-right: #{12upx};
        }
    }

    .triangle {
        width: #{40upx};
        border-top: #{23upx} solid #ffffff;
        border-bottom: #{23upx} solid transparent;
        border-left: #{23upx} solid transparent;
        border-right: #{23upx} solid transparent;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .close {
        position: fixed;
        top: calc(26upx + var(--window-top));
        right: #{26upx};
        width: #{70upx};
        height: #{70upx};
        z-index: 1406;
        border-radius: #{35upx};
        background-color: rgba(51, 51, 51, .4);

        .image {
            width: #{26upx};
            height: #{26upx};
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .swiper {
        position: relative;
    }

    .cover-view-marks {
        position: fixed;
        top: var(--window-top);
        right: 0;
        z-index: 1401;
    }

    .video {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .pintuan {
        width: #{750upx};
        height: #{110upx};
        color: #ffffff;

        .single {
            text-align: center;
            line-height: #{110upx};
        }

        .tuan {
            text-align: center;
            line-height: #{110upx};
        }
    }

    .buy {
        color: #ffffff;
    }
</style>